<template>
  <DatePicker 
    placeholder="请选择年份" 
    mode="year"
    format="YYYY"
    valueFormat="YYYY"
    :open="isOpen"
    @openChange="(status) => isOpen =status"
    @panelChange="onPanelChange"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

<script lang="ts">
import { Mixins, Component, Vue, Prop } from 'vue-property-decorator'
import { DatePicker } from 'ant-design-vue'
import type { Moment } from 'moment'

@Component({
  components: {
    DatePicker
  }
})
export default class AYear extends Vue {
  public isOpen = false

  public mounted() {
    console.log('attrs =>', this.$attrs)
  }

  public onPanelChange(v: Moment) {
    this.$emit('input', v.format('YYYY'))
    this.isOpen = false
  }
}
</script>

<style scoped lang="less">
.title {
  line-height: 30px;
  text-indent: 8px;
  span:nth-child(2) {
    margin: 0 10px;
  }
}
</style>
